// const c = document.createElement("canvas");
// const size = 640;
// c.width = c.height = size;
// const ctx = c.getContext("2d");

// document.body.appendChild(c);
// if (ctx) {
//   const clearCanvas = () => {
//     ctx.fillStyle = "#000000";
//     ctx.fillRect(0, 0, size, size);
//   };
//   const onMouseDown = (e: MouseEvent) => {
//     const { clientX, clientY } = e;
//     onPlayFire(clientX, clientY);
//   };
//   let raf: number | undefined = undefined;
//   const onPlayFire = (x: number, y: number) => {
//     createFireworks(x, y);
//     function tick() {
//       ctx && (ctx.globalCompositeOperation = "destination-out");
//       ctx && (ctx.fillStyle = "rgba(0,0,0," + 10 / 100 + ")");
//       ctx && ctx.fillRect(0, 0, size, size);
//       ctx && (ctx.globalCompositeOperation = "lighter");

//       drawFireworks();
//       raf = requestAnimationFrame(tick);
//     }
//     raf && cancelAnimationFrame(raf);
//     tick();
//   };

//   var particles: { [key: string]: unknown }[] = [];
//   function createFireworks(sx: number, sy: number) {
//     particles = [];

//     var hue = Math.floor(Math.random() * 51) + 150;
//     var hueVariance = 30;
//     var count = 100;

//     for (var i = 0; i < count; i++) {
//       var p = {} as { [key: string]: unknown };

//       var angle = Math.floor(Math.random() * 360);
//       p.radians = (angle * Math.PI) / 180;
//       p.x = sx;
//       p.y = sy;
//       p.speed = Math.random() * 5 + 0.4;
//       p.radius = p.speed;
//       p.size = Math.floor(Math.random() * 3) + 1;
//       p.hue =
//         Math.floor(Math.random() * (hue + hueVariance - (hue - hueVariance))) +
//         (hue - hueVariance);
//       p.brightness = Math.floor(Math.random() * 31) + 50;
//       p.alpha = (Math.floor(Math.random() * 61) + 40) / 100;
//       particles.push(p);
//     }
//   }

//   function drawFireworks() {
//     clearCanvas();

//     for (var i = 0; i < particles.length; i++) {
//       var p = particles[i] as {
//         vx: number;
//         vy: number;
//         sx: number;
//         sy: number;
//         radians: number;
//         radius: number;
//         speed: number;
//         size: number;
//         hue: number;
//         brightness: number;
//         alpha: number;
//         x: number;
//         y: number;
//       };
//       var vx = Math.cos(p.radians) * p.radius;
//       var vy = Math.sin(p.radians) * p.radius + 0.4;
//       p.x += vx;
//       p.y += vy;
//       p.radius *= 1 - p.speed / 100;
//       p.alpha -= 0.005;
//       ctx && ctx.beginPath();
//       ctx && ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2, false);
//       ctx && ctx.closePath();
//       ctx &&
//         (ctx.fillStyle =
//           "hsla(" + p.hue + ", 100%, " + p.brightness + "%, " + p.alpha + ")");
//       ctx && ctx.fill();
//     }
//   }
//   const drawFire = (x: number, y: number, radius: number) => {
//     clearCanvas();
//     const count = 10; // 颗粒数量
//     for (let i = 0; i < count; i++) {
//       const angle = (360 / count) * i,
//         hd = (angle * Math.PI) / 180,
//         vx = x + Math.cos(hd) * radius,
//         vy = y + Math.sin(hd) * radius,
//         size = 2;

//       ctx.beginPath();
//       ctx.arc(vx, vy, size, 0, Math.PI * 2, false);
//       ctx.closePath();
//       ctx.fillStyle = "#ff0000";
//       ctx.fill();
//     }
//   };

//   c.addEventListener("mousedown", onMouseDown);
// }

// // 画龙
// // const cavs = document.createElement("canvas");
// // const ctx = cavs.getContext("2d");
// // document.body.appendChild(cavs);

// // const image = new Image();

// // image.src = "./res/long.png";
// // console.log(ctx);
// // image.onload = () => {
// //   if (!ctx) {
// //     return;
// //   }
// //   const w = image.width / 2,
// //     h = image.width / 2;
// //   console.log(w, h);

// //   cavs.width = w;
// //   cavs.height = h;
// //   ctx.drawImage(image, 0, 0, w, h);

// //   const imageData = ctx.getImageData(0, 0, w, h).data;
// //   console.log(imageData);

// //   ctx.fillStyle = "#ffffff";
// //   ctx.fillRect(0, 0, w, h);

// //   const gap = 8;

// //   for (let i = 0; i < h; i += gap) {
// //     for (let j = 0; j < w; j += gap) {
// //       let position = (w * i + j) * 4;
// //       let r = imageData[position],
// //         g = imageData[position + 1],
// //         b = imageData[position + 2];
// //       if (r !== 255 || g !== 255 || b !== 255) {
// //         // if(r+g+b==0){
// //         ctx.fillStyle = "#000";
// //         ctx.fillRect(j, i, 4, 4);
// //       }
// //     }
// //   }
// // };
